<template name="letList">
  <div class="letList">
    <p class="header">
      <span class="title">{{letListData.title}}</span>
      <a :href="letListData.moreUrl" class="more">{{letListData.more}}</a>
    </p>
    <el-carousel
      trigger="click"
      :height="carouselHeight + 'px'"
      arrow="never"
      class="banner"
      :indicator-position="indicatorNo"
    >
      <el-carousel-item v-for="item in letListData.contentList" :key="item.id">
        <a :href="item.nameUrl" :class="'img'+letListData.id " class="img">
          <img :src="item.img" style="width: 100%;" />
        </a>
        <a :href="item.nameUrl" :class="'name' + letListData.id" class="name">{{item.name}}</a>
        <p :class="'introduce'+letListData.id" class="introduce">{{item.introduce}}</p>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>     

<script>
export default {
  name: "letList",
  props: ["dataList", "count", "num", "indicatorNo", "haveP"],
  data() {
    return {
      carouselHeight: 300,
      letListData: this.dataList
    };
  },
  methods: {
    name() {
      let imgHeight = document.getElementsByClassName("img");
      let aHeight = document.getElementsByClassName("name");
      let pHeight = document.getElementsByClassName("introduce");
      let indicators = document.getElementsByClassName(
        "el-carousel__indicators--horizontal"
      );
      this.$nextTick(() => {
        let imgH = this.screen(imgHeight);
        let aH = this.screen(aHeight);
        let pH = this.screen(pHeight);
        this.carouselHeight = imgH + aH + pH + 12;
        if (indicators[this.count]) {
          let i = 0;
          let long = this.haveP.length;
          for (i; i < long; i++) {
            pH = this.screen(pHeight, this.haveP[i]);
            if (this.count == i) {
              indicators[this.count].style.bottom = aH + pH + 15 + "px";
              return;
            }
          }
        }
      });
    },
    screen(className, countP) {
      let i = 0;
      let long = className.length;
      for (i; i < long; i++) {
        let strI = JSON.parse(JSON.stringify(className))[i]._prevClass.charAt(
          JSON.parse(JSON.stringify(className))[i]._prevClass.length - 1
        );

        if (countP == null) {
          if (strI == this.count) {
            return className[i].clientHeight;
          }
        } else {
          if (strI == countP) {
            return className[i].clientHeight;
          }
        }
      }
    }
  },
  created() {
    this.name();
  }
};
</script>

<style lang="stylus" scoped>
.letList {
  margin-bottom: 20px;

  .header {
    display: flex;
    justify-content: space-between;
    height: 54px;
    align-items: center;

    .title {
      font-size: 17px;
    }

    .more {
      color: #888;
      font-size: 13px;
    }
  }

  .banner {
    .img {
      display: inline-block;
    }

    .name {
      display: inline-block;
      padding: 6px 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      width: inherit;

      &:hover {
        color: orange;
        text-decoration: underline;
      }
    }

    .introduce {
      font-size: 14px;
      color: #888;
    }

    >>> .el-carousel__button {
      width: 17px !important;
      height: 8px !important;
      border-radius: 5px;
      opacity: 1;
    }

    >>> .el-carousel__indicator.is-active button {
      background: orange;
    }

    >>> .el-carousel__indicator:hover button {
      background: orange;
    }

    >>> .el-carousel__indicators--horizontal {
      bottom: 104px;
      left: none;
      display: flex;
      justify-content: flex-end;
      right: -40%;
    }
  }
}
</style>